import React, { PureComponent } from 'react';
import {connect} from 'dva'
import {Icon, Upload, Button} from 'antd'
import path from 'path';
import styles from './index.less'
const Dragger = Upload.Dragger;

import { QINIU_DOMAIN, QINIU_UPLOAD_DOMAIN, TASK_APPROVE_STATUS, SOURCE, CHANNELS_FOR_CASCADER, TASK_TYPES } from '../../../constants';

@connect(state => ({
  qiniucloud: state.qiniucloud,
}))

export default class HomePageIntroVideo extends PureComponent {
  state = {
    listType: 'text'
  }
  makeUploadData = (file) => {
    const { qiniucloud } = this.props;
    const extname = path.extname(file.name);
    return {
      token: qiniucloud.uptoken,
      key: `${file.uid}${extname}`,
    };
  }
  beforeUpload = (file) =>
    new Promise(function(resolve, reject) {
      const isLt100M = file.size / 1024 / 1024 <= 100;
      if (!isLt100M) {
        message.error('上传文件最大100M');
        reject(isLt100M);
      }
      resolve(isLt100M);
    });
  onUploadChanhe = (data) => {
    this.setState({listType: ''})
    if(data.file.response) {
      this.setState({listType: 'text'})
      let {file, fileList} = data
      if(file.response) {
        let temp = []
        fileList.forEach(item => {
          temp.push(`${QINIU_DOMAIN}/${item.response.key}`)
        })
        this.props.onChange(temp)
      }
    }
  }
  delectVideo = () => {
    this.props.onChange([])
  }
  render() {
    const {lable, tips, onChange}= this.props
    return (
      <div>
        {this.props.value.length === 0
          ? <div className={styles['video-box']}>
              <Dragger name="file" accept="video/*"
                  action={QINIU_UPLOAD_DOMAIN}
                  listType={this.state.listType}
                  data={this.makeUploadData}
                  beforeUpload={this.beforeUpload}
                  onChange={this.onUploadChanhe}
                >
                  <div style={{padding: 50}}>
                    <Icon type="plus" />
                    <div className={styles['text']}>添加5s视频不超过4M</div>
                  </div>
                </Dragger>
            </div>
          : this.props.value.map(item =>
            <div className={styles['video']}
              style={{height: 250, position: 'relative', boxSizing: 'border-box',
                margin: 10}}
              key={item}
            >
            <Icon
              className={styles['close-icon']} type="close-circle"
              style={{fontSize: 32}}
              onClick={this.delectVideo}
            />

            <video
              style={{marginLeft: 10}}
              height="270" width="580"
              src={item} controls="controls" preload="true"
            >
              当前浏览器不支持 HTML5 video
            </video>
            <div>
              视频地址： <a href={item} target="_blank">{item}</a>
            </div>
          </div>
          )
        }
        <div style={{marginBottom: 30}}></div>
      </div>
    )
  }
}

const EmptyVideo = props =>
<div className={styles['empty-wrap']}
  style={{
    height: props.height || 155,
    width: props.width || 248,
    marginRight: '10px',
    marginBottom: '10px',
  }}
>
  <div className={styles['add']}>
    <Icon type="plus" />
    <div className={styles['text']}>
      {props.label}
    </div>
  </div>
</div>
